@import "../_config.scss";
.designer-activity {
    padding: 30px;
    background-color: $color-default;
    .promotion-content {
      img {
        width: 100%;
        text-align: center;
        word-wrap:break-word;
      }
    }
    .top-banner {
        background-image: image-url("detail.png");
        background-repeat: no-repeat;
        background-position: center center;
        height: 300px;
        margin-bottom: 30px;
    }
    .left {
        h1 {
            font-size: 20px;
            color: #222222;
            margin-top: 0;
        }
        .time-and-author {
            .time,
            .author {
                color: #767676;
                font-size: 14px;
            }
            .author {
                margin-left: 20px;
            }
        }
        .desc{
            line-height: 25px;
            color: #767676;
            font-size: 14px;
        }
        .line{
            margin-bottom: 15px;

            &.row{
                margin-top: 20px;
            }

            img{
                width: 100%;
            }
        }
        .point{
            font-weight: bold;
            font-size: 15px;
        }
    }
    .right {
        h2 {
            color: #222;
            font-size: 15px;
            margin: 0 0 15px;
        }
        .list {
            .item {
                position: relative;
                .img-link {
                    display: inline-block;
                    img {
                        width: 100%;
                        height: 160px;
                        &:hover {
                            opacity: 0.85;
                        }
                    }
                }
                h2 {
                    margin-top: 15px;
                    font-size: 14px;
                    color: #222222;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    &:hover {
                        color: $color-private;
                    }
                }
                .state {
                    position: absolute;
                    padding: 5px 15px;
                    right: 0;
                    bottom: 30px;
                    cursor: pointer;
                    .triangle {
                        position: absolute;
                        width: 0;
                        height: 0;
                        &.up {
                            top: 0;
                            left: -20px;
                            border-bottom: 15px solid transparent;
                            border-right: 20px solid $color-private;
                        }
                        &.down {
                            bottom: 0;
                            left: -20px;
                            border-top: 15px solid transparent;
                            border-right: 20px solid $color-private;
                        }
                    }
                    &.start {
                        background-color: $color-private;
                        color: #fff;
                    }
                    &.end {
                        color: #fff;
                        background-color: #DDE0E0;
                        .triangle.up,
                        .triangle.down {
                            border-right-color: #DDE0E0;
                        }
                    }
                }
            }
        }
    }
}
